<template>
    <div class="detail">
        <detail-nav-bar class="detail-nav"
                        @titleClick="titleClick"
                        ref="detailNav"
        ></detail-nav-bar>

        <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentscroll">
            <detail-swiper :top-images="topImages"></detail-swiper>
            <detail-base-info :goods="goods"></detail-base-info>
            <DetailShopInfo :shop="shop"></DetailShopInfo>
            <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad1"></detail-goods-info>
            <detail-param-info :param-info="paramInfo" ref="param"></detail-param-info>
            <detail-comment-info :comment-info="commentInfo" ref="comment"></detail-comment-info>
            <goodslist :goods="recommend" ref="recommend"></goodslist>
        </scroll>
        <detail-buttom-bar @addCart="addToCart"></detail-buttom-bar>
        <back-top @click.native="backclick" v-show="isshow"></back-top>
        <toast :message="messagelist" :is-show="toastShow"></toast>

    </div>

</template>

<script>
    import DetailNavBar from "./childComps/detailNavBar"
    import DetailSwiper from "./childComps/detailSwiper"
    import DetailBaseInfo from "./childComps/detailBaseInfo"
    import DetailShopInfo from "./childComps/detailShopInfo"
    import DetailGoodsInfo from "./childComps/detailGoodsInfo"
    import DetailParamInfo from "./childComps/detailParamInfo"
    import DetailCommentInfo from "./childComps/detailCommentInfo"
    import Scroll from "../../components/common/scroll/Scroll"
    import Goodslist from "../../components/content/goods/goodslist"
    import DetailButtomBar from "./childComps/detailButtomBar"
    import toast from  '../../components/common/toast/toast'
    import {backTopMiXin} from "../../common/mixin";
    import  {mapActions} from  'vuex'


    import {getDetail, Goods, Shop, GoodsParam, getRecommend} from "../../network/detail";

    export default {
        name: "detail",
        components: {
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailCommentInfo,
            DetailButtomBar,
            Goodslist,
            Scroll,
            toast

            // getDetail, Goods, Shop,方法不需要注册

        },
        mixins:[backTopMiXin],
        data() {
            return {
                iid: null,
                topImages: [],
                goods: {},
                shop: {},
                detailInfo: {},
                paramInfo: {},
                commentInfo: {},
                recommend: [],
                themetopY: [],
                currentIndex: 0,
                count:0,
                messagelist:'',
                toastShow:false

            }
        },
        methods: {
            ...mapActions([
                'addCartList'
            ]),
            imgLoad1() {
                if (this.$refs.scroll.scroll) {
                    this.$refs.scroll.scroll.refresh()
                }
                this.themetopY = []
                this.themetopY.push(0)
                this.themetopY.push(this.$refs.param.$el.offsetTop)
                this.themetopY.push(this.$refs.comment.$el.offsetTop)
                this.themetopY.push(this.$refs.recommend.$el.offsetTop)


            },
            titleClick(index) {

                this.$refs.scroll.scroll.scrollTo(0, -this.themetopY[index], 100)

            },

            //根据滚到到的位置控制nav标题颜色的跳转变动  默认probe-type为0不发射事件
            contentscroll(position) {
                //此时判断滚到高度是否大于themetopY里面的参数  [0, 2903, 3755, 4041]
                //获取position里面的y值

                //判断往上滚动条是否显示  backTop
                this.isshow = (-position.y) > 1000

                const positionY = -position.y
                //和主题中的值进行对比
                this.themetopY.forEach((item, i) => {
                    if (this.currentIndex !== i && (i < this.themetopY.length - 1 && (positionY > this.themetopY[i] && positionY < this.themetopY[i + 1])
                        || (i == this.themetopY.length - 1 && positionY > this.themetopY[i]))) {
                        this.currentIndex = i
                        // console.log(this.currentIndex)
                        this.$refs.detailNav.currentIndex = this.currentIndex
                    }
                })
            },
            //加入购物车的点击事件
            addToCart(){
                //1.获取加入购物车需要展示的商品信息
                const pruduce = {}
                    pruduce.image =  this.topImages[0]
                    pruduce.title = this.goods.title
                    pruduce.desc =this.detailInfo.desc
                    pruduce.price =this.goods.newPrice
                    pruduce.iid =this.iid
                    pruduce.count = this.count++
                //将数据发射给vuex的mutations中
                // this.$store.commit('addCartList',pruduce)

                //action 调用写法
                // this.$store.dispatch('addCartList',pruduce).then( res =>{
                //     console.log(res)
                // })
                this.addCartList(pruduce).then( res =>{
                    this.messagelist = ''
                    this.messagelist = res
                    this.toastShow = true

                    setTimeout( ()=>{
                        this.toastShow =false
                    },1500)


                    // this.$toast.methods.show(res, 20000)
                    // debugger

                })


            }
        },
        created() {
            //保存传入的iid
            this.iid = this.$route.params.iid
            //通过iid请求所需的数据
            getDetail(this.iid).then(res => {
                // console.log(res)
                const data = res.data.result
                //保存获取到的轮播图数据
                this.topImages = data.itemInfo.topImages

                //保存从信息中获取的杂乱信息糅合成一个对象   获取商品信息
                this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

                //保存店铺信息
                this.shop = new Shop(data.shopInfo)

                //保存商品的详细信息
                this.detailInfo = data.detailInfo

                //获取商品的参数信息
                this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
                //获取商品评论
                if (data.rate.cRate !== 0) {
                    this.commentInfo = data.rate.list[0]
                }
                //$nextTick会等到dom节点渲染完了才调用，所以可以用来获取更新完的数据
                //每次重主页进入的时候会由于图片加载未完毕而获取到错误的top值
                // this.$nextTick( () => {
                //     this.themetopY.push(0)
                //     this.themetopY.push(this.$refs.param.$el.offsetTop)
                //     this.themetopY.push(this.$refs.comment.$el.offsetTop)
                //     this.themetopY.push(this.$refs.recommend.$el.offsetTop)
                //     console.log(this.themetopY)
                // })


            })

            //通过接口获取推荐数据
            getRecommend().then(res => {
                // console.log(res)
                this.recommend = res.data.data.list
            })
        },
        // updated() {
        //     //多次更新会多次赋值，所以更新时重新为空赋值
        //     this.themetopY = []
        //
        //     this.themetopY.push(0)
        //     this.themetopY.push(this.$refs.param.$el.offsetTop)
        //     this.themetopY.push(this.$refs.comment.$el.offsetTop)
        //     this.themetopY.push(this.$refs.recommend.$el.offsetTop)
        //     console.log(this.themetopY)
        // }


    }
</script>

<style scoped>
    .detail {
        height: 100vh;
        position: relative;
        z-index: 10;
        background-color: #ffffff;

    }

    .content {
        /*可滚动搞度*/
        height: calc(100% - 44px);
    }

    .detail-nav {
        position: relative;
        z-index: 12;
        background-color: white;
    }

</style>